<template>
    <div class="empty-state text-center py-5 text-muted">
        <div class="emoji mb-3">{{ icon }}</div>
        <h5 class="fw-semibold mb-2">{{ title }}</h5>
        <p class="small">{{ description }}</p>
    </div>
</template>

<script setup>
defineProps({
    icon: {
        type: String,
        default: '📭'
    },
    title: {
        type: String,
        default: '暂无数据'
    },
    description: {
        type: String,
        default: '快去添加一笔账单试试吧～'
    }
});
</script>

<style scoped>
.empty-state {
    opacity: 0.75;
    transition: all 0.3s ease;
}

.emoji {
    font-size: 4rem;
    animation: float 2s ease-in-out infinite;
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}
</style>
